sdk/samples/all in on code/Visual Studio 2010/CSASPNETExcelLikeGridView/Default.aspx

   1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CSExcelLikeGridView._Default" %>
   2
   3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml">
   5 <head runat="server">
   6     <title>CSExcelLikeGridView</title>
   7     <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript">
   8     </script>
   9     <script type="text/javascript">
  10
  11         //Function to read HidState (JSON) to keep the state color
  12         function ResetColors(color1, color2) {
  13             var contents = $(":hidden:last").val();
  14
  15             // If not "[]", meaning something changed, reset colors.
  16             if (contents.toString() != "[]") {
  17                 // Convert to JSON object.
  18                 var objectc = eval(contents);
  19
  20                 // To reset colors depending on whether it's changed
  21                 for (var i = 0; i < objectc.length; ++i) {
  22                     if (objectc[i].Color != '') {
  23                         $("td:eq(" + objectc[i].Index + ")").css("background-color", objectc[i].Color);
  24                     }
  25
  26                     var checked = objectc[i].Deleted == "True";
  27
  28                     if (parseInt(objectc[i].Index) % 2 == 0) {
  29                         $("td:eq(" + parseInt(objectc[i].Index - 2) + ")").find(":checkbox").attr("checked", checked);
  30                     }
  31                     else {
  32                         $("td:eq(" + parseInt(objectc[i].Index - 3) + ")").find(":checkbox").attr("checked", checked);
  33                     }
  34
  35                     // If a checkbox checked, change the row color
  36                     if (checked) {
  37                         $("td:eq(" + objectc[i].Index + ")").parent().css("background-color", "red");
  38                     }
  39                 }
  40             }
  41
  42         }
  43
  44         //Validation for Save
  45         function SaveValidate() {
  46             //first tell whether you've missed "Name" to be ful-filled...
  47
  48             if (Page_ClientValidate('Fill')) {
  49                 return confirm('Do you really want to save all these changes together?');
  50             }
  51             else {
  52                 alert("Attention! You cannot leave a name blank!");
  53             }
  54         }
  55
  56         //Validation for Insert
  57         function InsertValidate() {
  58             //first tell whether you've missed "Name" to be ful-filled...
  59
  60             if (!Page_ClientValidate('Insert')) {
  61                 alert("Attention! You cannot insert a blank name!");
  62             }
  63         }
  64
  65         // Add dynamically events for all textboxes
  66         // except the footer one to turn the background color.
  67         function AddEvents() {
  68
  69             var rowarray = $("tr");
  70             for (var i = 0; i < rowarray.length - 1; ++i) {
  71                 $(rowarray[i]).find(":text").change(function () {
  72                     $(this).parent().css("background", "blue");
  73                 });
  74             }
  75
  76         }
  77
  78         $(function () {
  79
  80             //Keep the original color row for odd
  81             var color1 = $("tr:eq(1)").css("background-color").valueOf();
  82             var color2 = $("tr:eq(2)").css("background-color").valueOf();
  83             var headercolor = $("tr:first").css("background-color").valueOf();
  84             var footercolor = $("tr:last").css("background-color").valueOf();
  85
  86             AddEvents();
  87
  88             // Header checkbox's cascading effect:
  89             $("#chkAll").click(function () {
  90
  91                 $(":checkbox").attr("checked", $(this).attr("checked"));
  92
  93                 if ($(this).attr("checked")) {
  94                     $(":checkbox").parent().parent().css("background-color", "red");
  95                     //Reset the color of header
  96                     $("tr:first").css("background-color", headercolor);
  97                 }
  98                 else {
  99                     $("tr:odd").css("background-color", color1);
 100                     $("tr:even").css("background-color", color2);
 101
 102                     //Reset the color of header and footer
 103                     $("tr:first").css("background-color", headercolor);
 104                     $("tr:last").css("background-color", footercolor);
 105                 }
 106             });
 107
 108             //Single checkbox checked event
 109             $(":checkbox").click(function () {
 110                 if ($(this).attr("checked")) {
 111                     $(this).parent().parent().css("background-color", "red");
 112                 }
 113                 else {
 114                     if ($(this).parent().parent().index() % 2 == 0) {
 115                         $(this).parent().parent().css("background-color", color2);
 116                     }
 117                     else {
 118                         $(this).parent().parent().css("background-color", color1);
 119                     }
 120                 }
 121
 122                 //Reset the header color
 123                 $("tr:first").css("background-color", headercolor);
 124             });
 125
 126             ResetColors(color1, color2);
 127         })
 128
 129     </script>
 130 </head>
 131 <body>
 132     <form id="form1" runat="server">
 133     <h1>
 134         Demo for Batching Actions</h1>
 135     <span style="color: Red">red row to be deleted</span>
 136     <br />
 137     <span style="color: green">green row to be added</span>
 138     <br />
 139     <span style="color: blue">blue cell to be modified</span>
 140     <br />
 141     <hr />
 142     <div>
 143         <asp:GridView ID="GridView1" runat="server" Width="70%" Height="50%" AutoGenerateColumns="False"
 144             CellPadding="4" ForeColor="#333333" GridLines="None" ShowFooter="True">
 145             <AlternatingRowStyle BackColor="White" />
 146             <Columns>
 147                 <asp:TemplateField HeaderText="Delete State">
 148                     <HeaderTemplate>
 149                         <input id="chkAll" type="checkbox" />
 150                         Delete
 151                     </HeaderTemplate>
 152                     <ItemTemplate>
 153                         <asp:CheckBox ID="chkDelete" runat="server" />
 154                     </ItemTemplate>
 155                 </asp:TemplateField>
 156                 <asp:TemplateField HeaderText="Id">
 157                     <ItemTemplate>
 158                         <%#Eval("Id") %>
 159                     </ItemTemplate>
 160                     <FooterTemplate>
 161                         Name:<asp:TextBox ID="tbNewName" runat="server"></asp:TextBox>
 162                         <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="tbNewName"
 163                             ErrorMessage="You cannot insert a blank name!" ForeColor="#FFFF66" ValidationGroup="Insert"></asp:RequiredFieldValidator>
 164                     </FooterTemplate>
 165                 </asp:TemplateField>
 166                 <asp:TemplateField HeaderText="Name">
 167                     <ItemTemplate>
 168                         <asp:TextBox ID="tbName" runat="server" Text='<%#Eval("PersonName") %>'>
 169                         </asp:TextBox>
 170                         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbName"
 171                             ErrorMessage="You cannot leave a name blank!" ValidationGroup="Fill"></asp:RequiredFieldValidator>
 172                     </ItemTemplate>
 173                     <FooterTemplate>
 174                         Address:<asp:TextBox ID="tbNewAddress" runat="server"></asp:TextBox>
 175                     </FooterTemplate>
 176                 </asp:TemplateField>
 177                 <asp:TemplateField HeaderText="Address">
 178                     <ItemTemplate>
 179                         <asp:TextBox ID="tbAddress" runat="server" Text='<%#Eval("PersonAddress") %>'>
 180                         </asp:TextBox>
 181                     </ItemTemplate>
 182                     <FooterTemplate>
 183                         <asp:Button ID="btnAdd" runat="server" Text="Add a new row" OnClick="btnAdd_Click"
 184                             ValidationGroup="Insert" OnClientClick="InsertValidate()" />
 185                     </FooterTemplate>
 186                 </asp:TemplateField>
 187             </Columns>
 188             <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" HorizontalAlign="Center"
 189                 VerticalAlign="Middle" />
 190             <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" HorizontalAlign="Center"
 191                 VerticalAlign="Middle" />
 192             <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
 193             <RowStyle BackColor="#FFFBD6" ForeColor="#333333" HorizontalAlign="Center" VerticalAlign="Middle" />
 194             <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
 195         </asp:GridView>
 196     </div>
 197     <asp:Button ID="btnSaveAll" runat="server" Height="30px" Text="Save All Changes"
 198         Width="149px" OnClick="btnSaveAll_Click" OnClientClick="SaveValidate()" ValidationGroup="Fill" />
 199     <asp:HiddenField ID="HidState" runat="server" Value="[]" />
 200     </form>
 201 </body>
 202 </html>